<template>
  <view
    class="dp-picture"
    :style="{
      position: params.is_inline == 1 ? 'absolute' : 'relative',
      backgroundColor: params.bgcolor,
      margin: params.margin_y * 2.2 + 'rpx ' + params.margin_x * 2.2 + 'rpx 0',
      padding: params.padding_y * 2.2 + 'rpx ' + params.padding_x * 2.2 + 'rpx',
      zIndex: params.z_index,
      top: params.is_inline == 1 ? params.inline_top * 2.2 + 'rpx' : '0',
    }"
  >
    <!--:data-url="item.imgurl"
			:data-urls="data.map(item => item.imgurl).join(',')" @tap="previewImage" uni自带预览 @click="goto"-->
    <view
      v-for="(item, index) in data"
      :key="item.id"
      :data-url="item.hrefurl"
      @tap="to(item, index)"
    >
      <button
        class="picture-button"
        v-if="item.hrefurl == 'contact::'"
        open-type="contact"
      >
        <image
          class="picture-img"
          show-menu-by-longpress="true"
          :src="item.imgurl"
          mode="widthFix"
          :style="{ borderRadius: params.borderradius * 2.2 + 'rpx' }"
        ></image>
      </button>
      <button
        class="picture-button"
        v-else-if="item.hrefurl == 'share::'"
        open-type="share"
      >
        <image
          class="picture-img"
          show-menu-by-longpress="true"
          :src="item.imgurl"
          mode="widthFix"
          :style="{ borderRadius: params.borderradius * 2.2 + 'rpx' }"
        ></image>
      </button>
      <image
        v-else
        class="picture-img"
        show-menu-by-longpress="true"
        :src="item.imgurl"
        mode="widthFix"
        :style="{ borderRadius: params.borderradius * 2.2 + 'rpx' }"
      ></image>
    </view>

    <dp-previewimg
      ref="previewImage"
      :imgs="
        data.map((item) => {
          return item.imgurl;
        })
      "
      :imgObjs="data"
      :opacity="0.9"
      :circular="true"
      :saveBtn="true"
      :rotateBtn="false"
      :toBtn="true"
    ></dp-previewimg>
  </view>
</template>
<script>
var app = getApp();
export default {
  props: {
    params: {},
    data: {},
  },
  data() {
    return {};
  },
  methods: {
    // 打开预览
    to(item, index) {
      if (this.params.is_preview == "1") {
        this.$refs.previewImage.open(index);
      } else {
        app.goto(item.hrefurl);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.dp-picture {
  height: auto;
  position: relative;
  font-size: 0;
  // width: 100vw;
}

.dp-picture .picture-img {
  width: 100%;
  height: auto;
  margin: 0px;
  margin: -1rpx 0;
  padding: 0px;
  display: table;
}

.dp-picture .picture-button {
  line-height: 0;
}

.preview-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 999;
  display: flex;
  flex-direction: column;
}

.preview-header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28rpx;

  .preview-count {
    background: rgba(0, 0, 0, 0.5);
    padding: 4rpx 20rpx;
    border-radius: 30rpx;
  }

  .preview-close {
    position: absolute;
    right: 0;
    margin: 40rpx;
  }
}

.preview-swiper {
  flex: 1;
  width: 100%;

  .preview-image {
    width: 100%;
    height: 100%;
  }
}

.preview-footer {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60rpx;

  .preview-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;

    image {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
    }

    text {
      font-size: 24rpx;
    }
  }
}
</style>
